<template>
  <div class="my-assets">
    <div class="asset-header">
    	<div class="asset-header-top">
    		<x-icon @click="routerBack" class="back" type="ios-arrow-left" size="24"></x-icon>
    		<h2 class="title">账户余额</h2>
    	</div>
    	<div class="asset-total"><small>¥</small> 2846.00</div>
    	<router-link :to="{ path: '/my/asset/recharge' }" class="recharge-btn"><span>充值</span></router-link>
    </div>
    <div class="asset-tab bottom-1px">
    	<span class="tab-item" @click="onClick(0)" :class="{ active: nowIndex == 0 }">账单明细</span>
    	<span class="tab-item" @click="onClick(1)" :class="{ active: nowIndex == 1 }">消费</span>
    	<span class="tab-item" @click="onClick(2)" :class="{ active: nowIndex == 2 }">充值</span>
    </div>
    <div class="tab-content" ref="tabScroll">
    	<div>
		  	<div class="tab-cell bottom-1px">
					<div class="content">
						<p class="status">支付宝提现成功</p>
						<span class="date">2018-01-08 12:00:00</span>
					</div>
					<div class="money">-100</div>
				</div>
				<div class="tab-cell bottom-1px">
					<div class="content">
						<p class="status">微信充值成功</p>
						<span class="date">2018-01-08 12:00:00</span>
					</div>
					<div class="money">+100</div>
				</div>
			</div>
    </div>
  </div>
</template>

<script>
import { Group, Cell } from 'vux'
import BScroll from 'better-scroll'
export default {
	components: {
		Group,
		Cell
	},
	data () {
		return {
			nowIndex: 0
		}
	},
	methods: {
		routerBack () {
  		this.$router.go(-1)
  	},
  	onClick (index) {
  		this.nowIndex = index
  	},
  	_initScroll () {
  		this.tabScroll = new BScroll(this.$refs.tabScroll, {

			}) 
  	}
	},
	created () {
		this.$nextTick(() => {
			this._initScroll()
		})
	}
}
</script>

<style scoped>
.my-assets {
	background: #fff;
	overflow: hidden;
}
.asset-header {
  position: relative;
  z-index: 10;
  padding: 20px 15px 0 15px;
  background: linear-gradient(120deg,#eb3c3c 20%, #fa8b6e 100%);
  color: #fff;
}
.asset-header-top {
	display: flex;
}
.asset-header-top .title {
	font-size: 16px;
	flex: 1;
	text-align: center;
	line-height: 24px;
	padding-right: 24px;
}
.asset-header-top svg.back {
	position: relative;
	margin: -2px 0 0 -5px;
	fill: #fff;
}
.asset-total {
	text-align: center;
	padding: 18px 15px 0 15px;
	font-size: 30px;
	line-height: normal;
}
.asset-total small {
	font-size: 16px;
}
.recharge-btn {
	position: relative;
	display: block;
	margin: 0 auto;
	width: 62px;
	height: 62px;
	margin-top: -10px;
	top: 30px;
	border: 6px solid rgba(255, 255, 255, .3);
	border-radius: 100%;
	overflow: hidden;
	z-index: 5;
	color: #fff;
}
.recharge-btn span {
	display: block;
	text-align: center;
	line-height: 50px;
	background: linear-gradient(-30deg, #ff7459 30%, #eb3c3c 100%);
}
.asset-tab {
	position: relative;
	padding: 35px 15px 0 15px;
	z-index: 5;
	background: #fff;
}
.asset-tab:after {
	bottom: 0;
}
.asset-tab .tab-item {
	position: relative;
	display: inline-block;
	margin-right: 15px;
	font-size: 14px;
	color: #787878;
	line-height: 40px;
}
.tab-content {
	position: absolute;
	width: 100%;
	top: 223px;
	bottom: 0;
}
.tab-item.active {
	color: #333;
}
.tab-item.active:after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	width: 100%;
	border-bottom: 2px solid #e93b3d;
	z-index: 5;
}
.tab-cell {
	display: flex;
	background: #fff;
	padding: 15px;
	align-items: center;
}
.tab-cell:after {
	bottom: 0;
}
.content {
	flex: 1;
}
.content .status {
	font-size: 16px;
	color: #333;
}
.content .date {
	color: #999;
}
.money {
	font-size: 24px;
	color: #333;
}
</style>
